<html>
    <head>
        <style>
            a {
                color:black;
                text-decoration:none;
                font-family:serif;
            }
            body {
                margin:0;
                padding:1px;
                text-align:center;
            }
            #messages {
                width:460px;
                overflow:visible;
                font-family:serif;
            }
            .image {
                float:left;
                padding:5px;
                overflow:hidden;
                max-height:65px;
            }
            .msg {
                overflow:hidden;
                color:#222222;
            }
            .user {
                color:#20355a;
            }
            .message{
                text-align:left;
                font-size:15px;
                border-radius:10px;
                margin:auto;
                margin:7px;
                min-height:65px;
                padding:7px;
                background-color:#e4eaf6;
            }
        </style>

        <script>
            function init()
            {
                var DOMWindow = chrome.extension.getBackgroundPage();
                document.getElementById("messages").innerHTML = DOMWindow.document.getElementById("messages").innerHTML;

                if(document.getElementById("messages").innerHTML == "")
                   document.getElementById("messages").innerHTML= "<div style=\"background-color:#e4eaf6;font-size:15px;padding:5px;border-radius:10px;\"><a onclick=\"goToMeebo()\" href=\"#\">Open Meebo</a></div>";

            }

            function delMessage(obj)
            {
                var DOMWindow = chrome.extension.getBackgroundPage();
                //DOMWindow.document.getElementById("messages").removeChild(DOMWindow.document.getElementById(obj.id));
                DOMWindow.document.getElementById("messages").innerHTML = "";
                //document.getElementById("messages").removeChild(obj);
                chrome.browserAction.setBadgeText({text:""});
                chrome.browserAction.setIcon({path: "icon.png"});
                goToMeebo();
            }
            function goToMeebo()
            {
                chrome.tabs.getAllInWindow(undefined, function(tabs)
                {
                    for(var i = 0, tab; tab = tabs[i]; i++)
                    {
                        if(tab.url.match(/^https?\:\/\/\w{0,3}\.?meebo\.com.*$/))
                        {
                            chrome.browserAction.setBadgeText({text:""});
                            self.close();
                            chrome.tabs.update(tab.id, { selected: true } );
                            id = tab.id;
                            return;
                        }
                    }
                    chrome.tabs.create({url: "http://www.meebo.com/" });
                });
            }

        </script>
    </head>
    <body onload="init()">
        <div id="test"></div>
        <div id="messages">

        </div>
    </body>
</html>